<template>
    <!-- 编程题 -->
    <div class="create-short-answer">
        <!-- 题目类型 -->
        <span>1. 简答题</span>
        <n-input type="textarea" placeholder="设置题目" class="textarea" clearable />

        <!-- 分值 -->
        <label class="score">
            <span>分值:</span>
            <n-input-number placeholder="分值" :min="0" :max="20" />
        </label>
        <!--  -->

       <p style="margin-bottom: 20px;">设置参考答案</p>
        <!-- <code-editor class="code-editor"></code-editor> -->

        
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { openInfo } from "@/utils/openInfo";
// import CodeEditor from "../CodeEditor.vue";

// 父组件给的数据
const props = defineProps(['checkboxData','number'])
const shortAnswerData = props.shortAnswerData
const number = props.number








</script>

<style scoped>
/* 设置题目 */
.textarea {
    margin: 10px 0px 10px 0px;
}

/* 分值 */
.score {
    display: flex;
    align-items: center;
}

/* 分值二字文本 */
.score span {
    width: 40px;
    cursor: pointer;
}

/* 全部选项框 */
.options {
    width: 100%;
}

/* 单个选项框 */
.option {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

/* 添加选项 */
.add-option {
    margin-top: 10px;
    cursor: pointer;
    user-select: none;
    font-style: italic;
    color: rgb(65, 63, 61, 0.8);
    transition: color 0.3s ease, text-decoration 0.3s ease, font-size 0.3s ease;
}

.add-option:hover {
    color: rgba(22, 112, 112, 0.8);
    text-decoration: underline dashed;
    font-size: 15px;
}

/* 删除选项图标 */
.delete-img {
    margin-left: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.delete-img:hover {
    transform: scale(1.2);
}
.code-editor{
    width: 800px;
    height: 400px;
    border: 1px solid rgb(224, 174, 174,0.1);
    border-radius: 10px;
    padding: 20px;
}
</style>